<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
        <style type="text/css">
            body {
                padding: 50px 80px;
                font-family: "Lucida Grande", "bitstream vera sans", "trebuchet ms", sans-serif, verdana;
            }
            
            /* get rid of those system borders being generated for A tags */
            a:active {
                outline: none;
            }
            
            a:focus {
                -moz-outline-style: none;
            }
        </style>
        <!--scrollable-horizontal-->
        <style>
            
            /*
             root element for the scrollable.
             when scrolling occurs this element stays still.
             */ .scrollable {
                /* required settings */
                position: relative;
                overflow: hidden;
                width: 550px;
                height: 120px;
                /* custom decorations */
                border: 1px solid #ccc;
                background: url(./img/gradient/h300.png) repeat-x;
            }
            
            /*
             root element for scrollable items. Must be absolutely positioned
             and it should have a extremely large width to accomodate scrollable
             items.  it's enough that you set the width and height for the root
             element and not for this element.
             */ .scrollable .items {
                /* this cannot be too large */
                width: 20000em;
                position: absolute;
                clear: both;
            } .items div {
                float: left;
                width: 680px;
            }
            
            /* single scrollable item */ .scrollable img {
                float: left;
                margin: 20px 5px 20px 21px;
                background-color: #fff;
                padding: 2px;
                border: 1px solid #ccc;
                width: 100px;
                height: 75px;
                -moz-border-radius: 4px;
                -webkit-border-radius: 4px;
            }
            
            /* active item */ .scrollable .active {
                border: 2px solid #000;
                position: relative;
                cursor: default;
            }
        </style>
        <!--scrollable button-->
        <style type="text/css">
            
            /* this makes it possible to add next button beside scrollable */ .scrollable {
                float: left;
            }
            
            /* prev, next, prevPage and nextPage buttons */
            a.browse {
                background: url(./img/scrollable/arrow/hori_large.png) no-repeat;
                display: block;
                width: 30px;
                height: 30px;
                float: left;
                margin: 40px 10px;
                cursor: pointer;
                font-size: 1px;
            }
            
            /* right */
            a.right {
                background-position: 0 -30px;
                clear: right;
                margin-right: 0px;
            }
            
            a.right:hover {
                background-position: -30px -30px;
            }
            
            a.right:active {
                background-position: -60px -30px;
            }
            
            /* left */
            a.left {
                margin-left: 0px;
            }
            
            a.left:hover {
                background-position: -30px 0;
            }
            
            a.left:active {
                background-position: -60px 0;
            }
            
            /* up and down */
            a.up, a.down {
                background: url(./img/scrollable/arrow/vert_large.png) no-repeat;
                float: none;
                margin: 10px 50px;
            }
            
            /* up */
            a.up:hover {
                background-position: -30px 0;
            }
            
            a.up:active {
                background-position: -60px 0;
            }
            
            /* down */
            a.down {
                background-position: 0 -30px;
            }
            
            a.down:hover {
                background-position: -30px -30px;
            }
            
            a.down:active {
                background-position: -60px -30px;
            }
            
            /* disabled navigational button */
            a.disabled {
                visibility: hidden !important;
            }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <!-- HTML structures -->
        <div style="margin:0 auto; width: 634px; height:120px;">
            <!-- "previous page" action --><a class="prev browse left"></a>
            <!-- root element for scrollable -->
            <div class="scrollable" id="scrollable">
                <!-- root element for the items -->
                <div class="items">
                    <!-- 1-5 -->
                    <div>
                        <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" /><img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" /><img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" /><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
                    </div><!-- 5-10 -->
                    <div>
                        <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" /><img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" /><img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" /><img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
                    </div><!-- 10-15 -->
                    <div>
                        <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" /><img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" /><img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" /><img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
                    </div>
                </div>
            </div><!-- "next page" action --><a class="next browse right"></a>
        </div>
        <script type="text/javascript">
            $(function(){
                // initialize scrollable
                $(".scrollable").scrollable();
            });
        </script>
    </body>
</html>
